<template>
  <div class="military-hot" :class="{ 'mobile-layout': isMobile }">
    <!-- 左侧热门列表区域 -->
    <div class="hot-left">
      <div class="hot-tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab"
          :class="{ active: activeTab === index }"
          @click="switchTab(index)"
        >
          <i :class="`iconfont   ${tab.icon}`"></i>
          <div>
            {{ tab.name }}
          </div>
        </div>
      </div>

      <ul class="news-list">
        <li v-for="(item, index) in formattedHotList" :key="index">
          <!-- <span class="item-type"></span> -->
          <!-- <i class="el-icon-video-play item-icon"></i> -->
          <i class="iconfont icon-tushuqikan item-icon"></i>

          <span class="item-title" :title="item.Content">{{
            item.Content
          }}</span>
          <span class="item-date">{{ item.createTime }}</span>
        </li>
      </ul>
    </div>

    <!-- 右侧热门检索词（词云图）区域 -->
    <div class="hot-right">
      <div class="wordCloud-title">
        <i class="iconfont icon-jiansuo"></i>
        <h3>热门检索词</h3>
      </div>

      <WordCloudContainer :wordList="wordList" @tag-click="goToDetail" />
    </div>
  </div>
</template>

<script>
import service from "@/service/service";

import WordCloudContainer from "@/components/WordCloudContainer.vue";

export default {
  name: "MilitaryHot",
  components: {
    WordCloudContainer,
  },
  data() {
    return {
      tabs: [
        {
          name: "热门浏览",
          icon: "icon-liulanjilu",
          list: [],
        },
        {
          name: "热门下载",
          icon: "icon-xiazai-yun-F",
          list: [],
        },
        {
          name: "热门收藏",
          icon: "icon-shoucangliang",
          list: [],
        },
      ],
      activeTab: 0, // 当前激活的选项卡索引
      isMobile: false, // 是否为移动端
      // 军事主题词云数据
      wordList: [],
    };
  },
  mounted() {
    this.getHotWords();
    this.getHotBrowse();
    this.getHotCollection();
    this.getHotDownload();
  },
  beforeUnmount() {},
  computed: {
    formattedHotList() {
      return this.tabs[this.activeTab].list.map((item) => ({
        ...item,
      }));
    },
  },
  methods: {
    //获取热门检索词

    async getHotWords() {
      try {
        const res = await service({
          url: `/frontend/index/hotSearchwords/15`,
          method: "get",
        });
        if (res.code === 200) {
          console.log(res, "获取热门检索词");
          this.wordList = res.data.map((item) => item.x);
        } else {
          this.$message.error(res.msg || "数据获取失败");
        }
      } catch (error) {
        this.$message.error(error || "数据获取失败");
      }
    },

    //热门浏览
    async getHotBrowse() {
      try {
        const res = await service({
          url: `/frontend/index/hotView/9`,
          method: "get",
        });
        if (res.code === 200) {
          console.log(res, "热门浏览");
          this.tabs[0].list = res.data.map((item) => {
            return {
              ...item,
               Content: `[${item.resourceTag?.tagName || ''}${item.resourceTag?.tagName && item.type?.typeName ? ' | ' : ''}${item.type?.typeName || ''}] ${item.title}`


            
            };
          });
        } else {
          this.$message.error(res.msg || "数据获取失败");
        }
      } catch (error) {
        this.$message.error(error || "数据获取失败");
      }
    },
    //热门下载
    async getHotDownload() {
      try {
        const res = await service({
          url: `/frontend/index/hotDownload/9`,
          method: "get",
        });
        if (res.code === 200) {
          console.log(res, "热门浏览");
          this.tabs[1].list = res.data.map((item) => {
            return {
              ...item,
               Content: `[${item.resourceTag?.tagName || ''}${item.resourceTag?.tagName && item.type?.typeName ? ' | ' : ''}${item.type?.typeName || ''}] ${item.title}`


             
            };
          });
        } else {
          this.$message.error(res.msg || "数据获取失败");
        }
      } catch (error) {
        this.$message.error(error || "数据获取失败");
      }
    },
    //热门收藏
    async getHotCollection() {
      try {
        const res = await service({
          url: `/frontend/index/hotCollect/9`,
          method: "get",
        });
        if (res.code === 200) {
          console.log(res, "热门浏览");
          this.tabs[2].list = res.data.map((item) => {
            return {
              ...item,
              Content: item.type
                ? `[${item.tag} ｜ ${item.type ? item.type.typeName : ""}] ${
                    item.title
                  }`
                : `[${item.tag}] ${item.title}`,
            };
          });
        } else {
          this.$message.error(res.msg || "数据获取失败");
        }
      } catch (error) {
        this.$message.error(error || "数据获取失败");
      }
    },

    // 切换选项卡
    switchTab(index) {
      this.activeTab = index;
    },
    // 格式化日期：2025-8-22 → 2025年8月22日
    formatDate(dateStr) {
      const date = new Date(dateStr);
      return `${date.getFullYear()}年${
        date.getMonth() + 1
      }月${date.getDate()}日`;
    },
    goToDetail(item) {
      console.log(item);
    },
  },
};
</script>

<style lang="scss" scoped>
$primary-color: #0066cc; // 主色：军事蓝
$secondary-color: #009688; // 辅助色：军绿蓝
$text-main: #333333; // 主文本色
$text-secondary: #666666; // 次要文本色
$border-color: #e5e5e5; // 边框色
$bg-light: #f7f7f7; // 浅色背景

.military-hot {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  background-color: #ffffff;
  margin-bottom: 20px;

  .hot-left {
    width: 850px;
    .hot-tabs {
      display: flex;
      border-bottom: 1px solid #e5e5e5;
      .tab {
        display: flex;
        align-items: center;
        padding: 22px 0 10px 0;
        margin-right: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28px;
        color: #333333;
        i {
          font-size: 28px;
          margin-right: 17px;
        }

        // 激活状态
        &.active {
          color: #327dff;
          font-weight: 500;
        }

        //  hover 状态
        &:hover:not(.active) {
          color: #327dff;
        }
      }
    }

    .news-list {
      list-style: none;
      padding: 0;

      li {
        padding: 12px 0;
        // border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        .item-icon {
          font-size: 20px;
          color: #9999;
          margin-right: 5px;
        }

        .item-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #333333;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;

          &:hover {
            color: #327dff;
          }
        }

        .item-date {
          margin-left: 67px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #666666;
        }
      }
    }
  }

  // 右侧词云区域
  .hot-right {
    display: flex;
    flex-direction: column;
    width: 470px;
    height: 492px;
    background: #f6faff;
    border-radius: 8px;
    .wordCloud-title {
      height: 40px;
      display: flex;
      align-items: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28px;
      color: #333333;
      line-height: 40px;
      padding: 20px 24px;
      border-bottom: 1px solid #e4e4e4;
      i {
        font-size: 30px;
        height: 40px;
        margin-right: 16px;
      }
    }

    // 词云容器
    .word-cloud-container {
      width: 470px;
      height: 492px;
      background: #f6faff;
    }
  }
}
</style>
